<template>
	<view class="admin-container">
		<!-- 管理员信息头部 -->
		<view class="admin-header">
			<view class="admin-info">
				<image :src="userInfo.avatar" class="admin-avatar" mode="aspectFill"></image>
				<view class="admin-details">
					<text class="admin-name">{{ userInfo.username }}</text>
					<text class="admin-role">系统管理员</text>
				</view>
			</view>
			<view class="admin-stats">
				<view class="stat-item">
					<text class="stat-number">{{ totalUsers }}</text>
					<text class="stat-label">用户总数</text>
				</view>
				<view class="stat-item">
					<text class="stat-number">{{ totalMovies }}</text>
					<text class="stat-label">电影总数</text>
				</view>
			</view>
		</view>

		<!-- 管理功能菜单 -->
		<view class="admin-menu">
			<view class="menu-section">
				<text class="section-title">内容管理</text>
				<view class="menu-list">
					<view class="menu-item" @click="goToMovieManagement">
						<view class="menu-icon movie-icon">
							<uni-icons type="videocam" size="24" color="#ff6b35"></uni-icons>
						</view>
						<view class="menu-content">
							<text class="menu-title">电影管理</text>
							<text class="menu-desc">添加、编辑、删除电影信息</text>
						</view>
						<uni-icons type="right" size="16" color="#cccccc"></uni-icons>
					</view>
				</view>
			</view>

			<view class="menu-section">
				<text class="section-title">用户管理</text>
				<view class="menu-list">
					<view class="menu-item" @click="goToUserManagement">
						<view class="menu-icon user-icon">
							<uni-icons type="person" size="24" color="#4CAF50"></uni-icons>
						</view>
						<view class="menu-content">
							<text class="menu-title">用户管理</text>
							<text class="menu-desc">查看、管理用户信息</text>
						</view>
						<uni-icons type="right" size="16" color="#cccccc"></uni-icons>
					</view>
				</view>
			</view>

			<view class="menu-section">
				<text class="section-title">系统设置</text>
				<view class="menu-list">
					<view class="menu-item" @click="clearCache">
						<view class="menu-icon cache-icon">
							<uni-icons type="trash" size="24" color="#FF9800"></uni-icons>
						</view>
						<view class="menu-content">
							<text class="menu-title">清除缓存</text>
							<text class="menu-desc">清理系统缓存数据</text>
						</view>
						<uni-icons type="right" size="16" color="#cccccc"></uni-icons>
					</view>

					<view class="menu-item" @click="exportData">
						<view class="menu-icon export-icon">
							<uni-icons type="download" size="24" color="#2196F3"></uni-icons>
						</view>
						<view class="menu-content">
							<text class="menu-title">数据导出</text>
							<text class="menu-desc">导出用户和电影数据</text>
						</view>
						<uni-icons type="right" size="16" color="#cccccc"></uni-icons>
					</view>

					<view class="menu-item logout" @click="handleLogout">
						<view class="menu-icon logout-icon">
							<uni-icons type="loop" size="24" color="#f44336"></uni-icons>
						</view>
						<view class="menu-content">
							<text class="menu-title logout-text">退出管理</text>
							<text class="menu-desc">返回普通用户界面</text>
						</view>
						<uni-icons type="right" size="16" color="#cccccc"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { useUserStore } from '@/stores/user.js'
import { useMovieStore } from '@/stores/movie.js'

export default {
	data() {
		return {
			userInfo: {},
			totalUsers: 0,
			totalMovies: 0
		}
	},
	setup() {
		const userStore = useUserStore()
		const movieStore = useMovieStore()
		return {
			userStore,
			movieStore
		}
	},
	onLoad() {
		this.checkAdminPermission()
		this.loadAdminData()
	},
	onShow() {
		this.loadAdminData()
	},
	methods: {
		// 检查管理员权限
		checkAdminPermission() {
			this.userStore.initUserData()
			
			if (!this.userStore.isAdmin) {
				uni.showModal({
					title: '权限不足',
					content: '您没有管理员权限，无法访问此页面',
					showCancel: false,
					success: () => {
						uni.redirectTo({
							url: '/pages/index/index'
						})
					}
				})
				return false
			}
			return true
		},

		// 加载管理员数据
		loadAdminData() {
			this.userInfo = JSON.parse(JSON.stringify(this.userStore.userInfo))
			this.totalUsers = this.userStore.users.length
			this.movieStore.initMovieData()
			this.totalMovies = this.movieStore.movies.length
		},

		// 跳转到电影管理
		goToMovieManagement() {
			uni.navigateTo({
				url: '/pages/admin/movie-management/movie-management'
			})
		},

		// 跳转到用户管理
		goToUserManagement() {
			uni.navigateTo({
				url: '/pages/admin/user-management/user-management'
			})
		},

		// 清除缓存
		clearCache() {
			uni.showModal({
				title: '清除缓存',
				content: '确定要清除所有缓存数据吗？此操作不可恢复！',
				success: (res) => {
					if (res.confirm) {
						try {
							// 清除除了用户信息外的所有缓存
							uni.removeStorageSync('movies')
							uni.removeStorageSync('banners')
							uni.removeStorageSync('coupons')
							uni.removeStorageSync('favorites')
							uni.removeStorageSync('watchHistory')
							uni.removeStorageSync('userReviews')
							
							uni.showToast({
								title: '缓存清除成功',
								icon: 'success'
							})
							
							// 重新初始化数据
							this.movieStore.initMovieData()
							this.loadAdminData()
						} catch (error) {
							uni.showToast({
								title: '清除失败',
								icon: 'none'
							})
						}
					}
				}
			})
		},

		// 导出数据
		exportData() {
			uni.showModal({
				title: '数据导出',
				content: '是否导出所有用户和电影数据？',
				success: (res) => {
					if (res.confirm) {
						try {
							const exportData = {
								users: this.userStore.users,
								movies: this.movieStore.movies,
								exportTime: new Date().toISOString()
							}
							
							// 在实际应用中，这里应该调用文件导出API
							console.log('导出数据:', exportData)
							
							uni.showToast({
								title: '数据导出成功',
								icon: 'success'
							})
						} catch (error) {
							uni.showToast({
								title: '导出失败',
								icon: 'none'
							})
						}
					}
				}
			})
		},

		// 退出管理
		handleLogout() {
			uni.showModal({
				title: '退出管理',
				content: '确定要退出管理员后台吗？',
				success: (res) => {
					if (res.confirm) {
						uni.redirectTo({
							url: '/pages/index/index'
						})
					}
				}
			})
		}
	}
}
</script>

<style scoped>
.admin-container {
	background: #f5f5f5;
	min-height: 100vh;
}

.admin-header {
	background: linear-gradient(135deg, #ff6b35, #ff8c42);
	padding: 40rpx;
	color: white;
}

.admin-info {
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
}

.admin-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	margin-right: 30rpx;
	border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.admin-details {
	flex: 1;
}

.admin-name {
	display: block;
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.admin-role {
	font-size: 28rpx;
	opacity: 0.9;
}

.admin-stats {
	display: flex;
	justify-content: space-around;
}

.stat-item {
	text-align: center;
}

.stat-number {
	display: block;
	font-size: 48rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.stat-label {
	font-size: 24rpx;
	opacity: 0.9;
}

.admin-menu {
	padding: 40rpx 30rpx;
}

.menu-section {
	margin-bottom: 40rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 20rpx;
	display: block;
}

.menu-list {
	background: white;
	border-radius: 20rpx;
	overflow: hidden;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-item.logout {
	border-top: 1rpx solid #f0f0f0;
}

.menu-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 30rpx;
}

.movie-icon {
	background: rgba(255, 107, 53, 0.1);
}

.user-icon {
	background: rgba(76, 175, 80, 0.1);
}

.cache-icon {
	background: rgba(255, 152, 0, 0.1);
}

.export-icon {
	background: rgba(33, 150, 243, 0.1);
}

.logout-icon {
	background: rgba(244, 67, 54, 0.1);
}

.menu-content {
	flex: 1;
}

.menu-title {
	display: block;
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 8rpx;
}

.logout-text {
	color: #f44336;
}

.menu-desc {
	font-size: 26rpx;
	color: #999999;
}
</style>
